import './App.scss'
import { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'
import { Spin } from 'antd'
import { routes } from './router'
// 导入页面=》没有懒加载
// import Layout from '@/pages/layout'
// import Login from '@/pages/login'
// import NotFound from '@/pages/404'
// import Test from './pages/test'

function App () {
  const element = useRoutes(routes)
  return (
    <div className='app'>
      {/* 配置路由 */}
      {/* 懒加载需要包裹Suspense组件 */}
      <Suspense fallback={
        <div className="lazyLoad">
          <Spin size="large" tip="玩命加载中..." />
        </div>
      }>
        {element}
      </Suspense>
    </div>
  )
  // return (
  //   <Router history={customHistory}>
  //     {/* 通过fallback指定懒加载的loading，组件没有加载完成显示fallback中的jsx结构 */}
  //     <Suspense
  //       fallback={
  //         <div className="lazyLoad">
  //           <Spin size="large" tip="玩命加载中..." />
  //         </div>
  //       }>
  //       <div className="app">
  //         {/* 路由规则path对应的组件渲染到配置路由的位置 */}
  //         {/* <div className="box">
  //       <h1>scss使用</h1>
  //     </div> */}
  //         {/* 配置路由规则：根组件配置的一级路由 */}
  //         <Switch>
  //           {/* path地址是/,重定向到/home */}
  //           <Redirect exact from="/" to="/home" />
  //           {/* <Route path="/home" component={Layout} /> */}
  //           {/* 
  //         AuthRoute封装说明：
  //         1. 可以配置路由
  //         2. 内部会有拦截（是否有token）
  //          */}
  //           <AuthRoute path="/home" component={Layout} abc="1" />
  //           <Route path="/test" component={Test} />

  //           <Route path="/login" component={Login} />
  //           {/* 兜底：404 */}
  //           <Route component={NotFound} />
  //         </Switch>
  //       </div>
  //     </Suspense>
  //   </Router>
  // )
}

export default App
